<template>
  <div>
    <!-- 制作一个框架包裹slider -->
    <div style="width:70%;margin:20px auto;height:400px">
      <!-- 配置slider组件 -->
      <slider ref="slider" :options="options" @slide="slide" @tap="onTap" @init="onInit">
        <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
        <!-- 设置loading,可自定义 -->
        1111
        <div slot="loading">
          <a-spin tip="Loading..." />
        </div>
      </slider>
    </div>
  </div>
</template>
<script>
import { slider, slideritem } from 'vue-concise-slider'
export default {
  data () {
    return {
      someList: [
        {
          html: 'slide1',
          style: {
            background: '#1bbc9b'
          }
        },
        {
          html: 'slide2',
          style: {
            background: '#4bbfc3'
          }
        },
        {
          html: 'slide3',
          style: {
            background: '#7baabe'
          }
        }
      ],
      options: {
        pagination: true,
        autoplay: 2000, // 自动滚动[ms]
        loop: true, // 是否循环滚动
        thresholdDistance: 100, // 滑动距离阈值判定
        thresholdTime: 300, // 滑动时间阈值判定
        speed: 300 // 滑动速度
      }
    }
  },
  methods: {
    // 监听事件
    slide (data) {
      // console.log(data)
    },
    onTap (data) {
      // console.log(data)
    },
    onInit (data) {
      // console.log(data)
    }
  },
  mounted () {

  },
  components: {
    slider,
    slideritem
  }
}
</script>
<style>
.slider-loading {
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
